<template>

    <a-form-item field="spec_type" label="商品规格">
      <a-radio-group v-model="forms.spec_type">
        <a-radio :value="10">单规格</a-radio>
        <a-radio :value="20">多规格</a-radio>
      </a-radio-group>
    </a-form-item>
    <template v-if="forms.spec_type === 10">
      <a-form-item field="goods_price" label="商品价格">
        <a-input-number v-model="forms.goods_price" :min="0" :precision="2" mode="button" />
      </a-form-item>

      <a-form-item field="line_price" label="划线价">
        <a-input-number v-model="forms.line_price" :min="0" :precision="2" mode="button" />
      </a-form-item>

      <a-form-item field="stock_num" label="当前库存数量">
        <a-input-number v-model="forms.stock_num" :min="0" :precision="2" mode="button" />
      </a-form-item>

      <a-form-item field="goods_weight" label="商品重量">
        <a-input-number v-model="forms.goods_weight" :min="0" :precision="2" mode="button" />
      </a-form-item>

      <a-form-item field="deduct_stock_type" label="库存计算方式">
        <a-radio-group v-model="forms.deduct_stock_type">
          <a-radio value="1" :default-checked="true">下单减库存</a-radio>
          <a-radio value="2">付款减库存</a-radio>
        </a-radio-group>

      </a-form-item>

      <a-form-item field="is_restrict" label="商品限购">
        <a-radio-group v-model="forms.is_restrict">
          <a-radio value="2" :default-checked="true">关闭</a-radio>
          <a-radio value="1">开启</a-radio>
        </a-radio-group>
      </a-form-item>

    </template>
    <template v-if="forms.spec_type === 20">
      <a-form-item field="action" label="商品规格">
        <div class="w-full">
          <p class="my-1.5">最多添加3个商品规格组，生成的SKU数量不能超出50个</p>
          <div class="w-full border my-3" v-for="(item, i) in multiSpecData.specList" :key="`mss_${i}`">
            <div class="flex items-center justify-between bg-blue-100 p-3">
              <a-input v-model="item.spec_name" @change="onChangeSpecGroupIpt" placeholder="请输入规格名称" allow-clear>
                <template #prepend>规格名称</template>
              </a-input>
              <div class="flex space-x-2">
                <a-button type="primary" status="danger" @click="handleDeleteSpecGroup(i)">
                  <template #icon>
                    <icon-delete />
                  </template>
                  删除规格值
                </a-button>
                <a-button type="primary" @click="handleAddSpecValue(i)">
                  <template #icon>
                    <icon-plus />
                  </template>
                  新增规格值
                </a-button>
              </div>
            </div>
            <a-row :gutter="10" class="p-3">
              <a-col class="mb-2" :xs="24" :sm="12" :md="8" :lg="6" v-for="(itm, idx) in item.valueList" :key="`vl_${idx}`">
                <a-input v-model="itm.spec_value" @change="onChangeSpecValueIpt" placeholder="请输入规格值" allow-clear>
                  <template #append>
                    <a-button type="text" status="danger" @click="handleDeleteSpecValue(i, idx)">
                      <template #icon>
                        <icon-delete />
                      </template>
                    </a-button>
                  </template>
                </a-input>
              </a-col>
            </a-row>
          </div>
          <a-button type="primary" @click="handleAddSpecGroup">
            <template #icon>
              <icon-plus />
            </template>
            添加规格组
          </a-button>
        </div>
      </a-form-item>
      <a-form-item field="skuList" label="SKU列表">
        <div class="space-y-2">
          <div v-if="multiSpecData.skuList.length > 1" class="flex items-center w-full space-x-2">
            <span class="title text-nowrap">批量设置:</span>
            <a-input-number v-model="multiSpecData.skuBatchForm.goods_price" placeholder="商品价格" :min="0.01" :precision="2" />
            <a-input-number v-model="multiSpecData.skuBatchForm.line_price" placeholder="划线价格" :min="0" :precision="2" />
            <a-input-number v-model="multiSpecData.skuBatchForm.stock_num" placeholder="库存数量" :min="0" :precision="0" />
            <a-input-number v-model="multiSpecData.skuBatchForm.goods_weight" placeholder="商品重量" :min="0" :precision="2" />
            <a-input v-model="multiSpecData.skuBatchForm.goods_sku_no" placeholder="sku编码" />
            <a-button type="primary" status="success" @click="handleSkuBatch">立即设置</a-button>
          </div>
          <a-table :columns="multiSpecData.skuColumns" :data="multiSpecData.skuList" :span-method="mergeCells" :scroll="{ x: true }" :pagination="false" :bordered="{ wrapper: true, cell: true }">
            <!-- 预览图 -->
            <template #image="{ record }">
              <a-upload
                  list-type="picture-card"
                  :show-file-list="false"
                  action="/"
                  image-preview
              />
              <!-- <ma-image-upload v-model="record.image_id" /> -->
            </template>
            <!-- 商品价格 -->
            <template #goods_price="{ record }">
              <a-input-number v-model="record.goods_price" :min="0.01" :precision="2" />
            </template>
            <!-- 划线价格 -->
            <template #line_price="{ record }">
              <a-input-number v-model="record.line_price" :min="0" :precision="2" />
            </template>
            <!-- 库存数量 -->
            <template #stock_num="{ record }">
              <a-input-number v-model="record.stock_num" :min="0" :precision="0" />
            </template>
            <!-- 商品重量 -->
            <template #goods_weight="{ record }">
              <a-input-number v-model="record.goods_weight" :min="0" :precision="2" />
            </template>
            <!-- sku编码 -->
            <template #goods_sku_no="{ record }">
              <a-input v-model.trim="record.goods_sku_no" />
            </template>
          </a-table>
        </div>
      </a-form-item>
      <a-form-item field="deduct_stock_type" label="库存计算方式">
        <a-radio-group v-model="forms.deduct_stock_type">
          <a-radio :value="10">下单减库存</a-radio>
          <a-radio :value="20">付款减库存</a-radio>
        </a-radio-group>
      </a-form-item>
    </template>


</template>

<script setup name="MultiSpec">
import MaImageUpload from '@cps/ma-upload/components/image-upload.vue'
import { Modal } from '@arco-design/web-vue'
import useHepler from '../hooks/useHelper.js'
import useMultiSpec from './useMultiSpec'
import MaUpload from "@cps/ma-upload/index.vue";
const { forms, rules } = useHepler()
const { multiSpecData, getFilterObject, onUpdate, mergeCells } = useMultiSpec()

// 添加规格组
function handleAddSpecGroup() {
  multiSpecData.specList.push({
    key: multiSpecData.specList.length || 0,
    spec_name: '',
    valueList: []
  })
  // 默认规格值
  const groupIndex = multiSpecData.specList.length - 1
  handleAddSpecValue(groupIndex)
}

// 删除规格组
function handleDeleteSpecGroup(groupIndex) {
  Modal.confirm({
    title: '您确定要删除该规格组吗?',
    titleAlign: 'start',
    content: '删除后不可恢复',
    onOk() {
      multiSpecData.specList.splice(groupIndex, 1)
      onUpdate()
    }
  })
}

// 添加规格值
function handleAddSpecValue(groupIndex) {
  const specGroupItem = multiSpecData.specList[groupIndex]
  const specValueList = specGroupItem.valueList
  specValueList.push({
    key: specValueList.length || 0,
    groupKey: specGroupItem.key,
    spec_value: ''
  })
  // 刷新规格值的key
  // onRefreshSpecValueKey(groupIndex)
}
// 刷新规格值的key, 可以不需要
// function onRefreshSpecValueKey(groupIndex) {
//   const specGroupItem = multiSpecData.specList[groupIndex]
//   const specValueList = specGroupItem.valueList
//   specValueList.forEach((item, index) => {
//     specValueList[index].key = index
//   })
// }

// 删除规格值
function handleDeleteSpecValue(groupIndex, valueIndex) {
  Modal.confirm({
    title: '您确定要删除该规格值吗?',
    titleAlign: 'start',
    alignCenter: false,
    content: '删除后不可恢复',
    onOk() {
      // 删除元素
      multiSpecData.specList[groupIndex].valueList.splice(valueIndex, 1)
      onUpdate()
    }
  })
}
// 生成并获取多规格数据
function onChangeSpecGroupIpt() {
  onUpdate()
}
function onChangeSpecValueIpt() {
  onUpdate()
}
// 批量设置sku事件
function handleSkuBatch() {
  const skuBatchForm = getFilterObject(multiSpecData.skuBatchForm)
  const skuList = multiSpecData.skuList
  for (const index in skuList) {
    skuList[index] = { ...skuList[index], ...skuBatchForm }
  }
}
const handleSubmit = ({ values, errors }) => {
  console.log('values:', values, '\nerrors:', errors)
}
</script>
